<template>
  <searchHeader></searchHeader>

  <van-tabs
    v-model:active="actived"
    class="topNav"
    swipeable
    title-active-color="#40404c"
    color="#f06742"
    @click-tab="click"
    ref="refItem"
  >
    <van-tab
      v-for="(item, index) in navList"
      :key="item.order"
      :class="{ active: actived == index }"
      :title="`${item.moduleName}`"
      class="van-item"
    ></van-tab>
  </van-tabs>
  <div v-if="indexItem == 0">
    <homeList />
  </div>
  <div v-else>
    <topNavDetail
      :nameList="nameList"
      :navList1="navList1"
      :floorList="floorList"
      :floorRowList="floorRowList"
      :floorColumList="floorColumList"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'topNav',
})
</script>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { getTopNavApi } from '../../api/topNavApi/index'

import homeList from '@/view/Home/homeList/index.vue'
import topNavDetail from '@/view/Home/topNavDetail/index.vue'
import { getYoushengshuNavApi } from '../../api/youshengshu/index'
import { useRouter } from 'vue-router'
const router: any = useRouter()

let actived = ref(0)
let nameList = ref<string[]>([]) //所有导航名
let navList = ref<any>([])

const getNavList = async () => {
  const res = await getTopNavApi()
  navList.value = res
  navList.value.forEach((item: any) => {
    nameList.value.push(item?.moduleKey)
  })

}

// 请求navDetail具体数据
let navList1 = ref<any>([])
let floorList = ref<any>([])
let floorRowList = ref<any>([])
let floorColumList = ref<any>([])

const getNavDetailList = async () => {
  const rest: any = await getYoushengshuNavApi(
    `${nameList.value[indexItem.value]}`,
  )

  navList1.value = rest.moduleContent.tomatoes
  floorList.value = rest.moduleContent.moduleRankDatas

  floorRowList.value = floorList.value.slice(0, 3)
  floorColumList.value = floorList.value.slice(3)

}

onMounted(() => {
  getNavList()
})

// 点击跳转
const toDetail = (name: any) => {
  if (name == 'tuijian') {
    router.push({ path: `/` })
  } else {
    router.push({ path: `/list/${name}`})
  }
}

//点击保存下标
let refItem = ref({}) //拿到组件实例，refItem.value.active得实例下标
const indexItem = ref(0) //激活时的下标

// 点击跳转
const click = (e: any) => {
  indexItem.value = e.name
  toDetail(nameList.value[indexItem.value])
}

// 监听路由的变化，发请求，获取数据，通过props传参
watch(
  () => router.currentRoute.value.path,
  (toPath) => {
    // 获取路由params参数
    const params = router.currentRoute.value.params

    if (params !== 'tuijian') {
      getNavDetailList()
    }
  },
)
</script>

<style lang="less" scoped>
.topNav {
  position: fixed;
  top: 50px;
  height: 40px;
  width: 100vw;
  margin-bottom: 15px;
  background-color: #ffff;
  z-index: 999;
  .van-item {
    transition: all 0.2s;
    padding-left: 15px;
  }
}
</style>
